* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.list-all {
	width: 100%;
	// 1
	.list-top-img {
		width: 100%;
		img {
			display: block;
			width: 100%;
			height: 12.5rem;
		}
	}
	// 2
	.list-centent {
		width: 100%;
		// height: 62.5rem;
		background: rgb(222, 60, 193);
		padding: .5rem .8125rem;
		// 2.1
		&>div {
				width: 100%;
				// height: 10.0625rem;
				padding: 1.25rem .625rem .9375rem;
				border-radius: .9375rem;
				background: #fff;
				position: relative;
				margin: 1.875rem 0 .9375rem;
			&>img {
				position: absolute;
				width: 4.1875rem;
				top: -1.375rem;
				left: 0;
			}
			&>div:nth-of-type(1) {
				width: 100%;
				height: 5.625rem;
				justify-content: space-between;
				display: flex;
				&>div:nth-of-type(1) {
					width: 4.125rem;
					border-radius: .3125rem;
					overflow: hidden;
					img {
						width: 100%;
					}
				}
				&>div:nth-of-type(2) {
					width: calc(100% - 4.5rem);
					// display: flex;
					// flex-direction: column;
					// justify-content: space-between;
					&>p:nth-of-type(1) {
						text-align: left;
						overflow: hidden;
						color: #2d3142;
						font-size: 1rem;
						line-height: 1.375rem;
						font-weight: bold;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
    					-webkit-line-clamp: 2;
					}
					&>p:nth-of-type(2) {
						color: #858282;
						font-size: .75rem;
						margin: .15rem 0 0;
						padding: .1rem .2rem;
						display: inline-block;
						border-radius: .2rem;
						border: 1px solid #c2c2c2;
					}
					&>p:nth-of-type(3) {
						margin: .3125rem 0 0;
						color: #f74c4c;
    					font-weight: 700;
						font-size: .8rem;
						span {
							font-size: .75rem;
							font-weight: 700;
						}
					}
				} 
			}
			&>div:nth-of-type(2) {
				&>div {
					&>div {
						margin: .625rem 0 0 0;
						background-color: #F5F5F5;
						width: 100%;
						height: 40px;
						border-radius: .25rem;
						padding: 0 0 0 .3125rem;
						p {
							line-height: 2.5rem;
							font-size: .75rem;
							&>span:nth-of-type(1) {
								color: #333;
								font-weight: bold;
							}
							&>span:nth-of-type(2) {
								color: #999;
							} 
						}
					}
				}

			}
			&>div:nth-of-type(3) {
				img {
					display: block;
				}
				margin: .625rem 0 0;
				width: 100%;
				&>div {
					width: 100%;
					height: 10.625rem;
					border-radius: .3125rem;
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					border-radius: .3125rem;
					&>div:nth-of-type(1) {
						width: 13.75rem;
						height: 10.625rem;
						overflow: hidden;

						img {
							width: 100%;
							height: 100%;
						}
					}
					&>div:nth-of-type(2) {
						width: calc(100% - 13.9rem);
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						div {
							width: 100%;
							height: 49.5%;
							overflow: hidden;
							img {
								width: 100%;
								height: 100%;
							}
						}
						
					} 
				}
			}
			&>div:nth-of-type(4) {
				width: 100%;
				display: flex;
				margin: .625rem 0 0;
				justify-content: space-between;
				&>div:nth-of-type(1) {
					img {
						width: 1.25rem;
						vertical-align: middle;
						border-radius: .625rem;
					}
					&>img:nth-of-type(2) , &>img:nth-of-type(3) {
						margin-left: -14px;
					}
					span {
						vertical-align: middle;
						font-size: .75rem;
    					color: #727479;
					}
				}
				&>div:nth-of-type(2) {
					background: linear-gradient(33deg,#ff754f,#fa5034);
					padding: .125rem .8rem;
					border-radius: .8rem;
					color: #fff;
					font-size: .875rem;

				} 
			}
		}
	}
}